<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		.box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
			position: relative;
			left: 0px;
			/*display: none;*/
		}
	</style>
	<script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">

		// window.onload = function  () {

		// 	var box = document.getElementsByClassName('box');

		// 	box[0].style.display= "none";
		// }


		$(function () {
			
			// $('.box p span').attr('name','bbbb');
			
			// $('.box p span').removeAttr('name');
			// 
			// $('.box p span').addClass('xbs')
			// 
			// $('.box').hover(function() {
			// 	$(this).css('background', 'blue');
			// }, function() {
			// 	$(this).css('background', 'red');
			// });
			// 
			$('input').click(function(event) {
				// $('.box').stop().slideToggle();
				// $('.box').fadeIn(3000, function() {
				// 	// alert(8888)
				// });
				// 
				$('.box').animate({'left': '1024px'},1000);

				// 回调函数
			});
		})

	</script>
</head>
<body>
	<input type="button" id="btn" value="变化">
	<div class="box" id="">
		<!-- <p>学并思<span name="xbs">好的</span></p> -->
	</div>
	<!-- <div class="box">
		<p>学并思</p>
		<span>好的</span>
	</div> -->
	
</body>
</html>